import Icon from '@/components/Icon';
import { useAppSelector } from '@/store';
import { Popup } from 'antd-mobile';
import { useState } from 'react';
import CommentInput from '../CommentInput';
import styles from './index.module.scss';
// 注意隐式转换，0不会隐式转换
type CommentFooterProps = {
  // normal 普通评论
  // reply 回复评论
  type?: 'normal' | 'reply';
};
export default function CommentFooter({ type = 'normal' }: CommentFooterProps) {
  const [showPopupFooter, setShowPopupFooter] = useState(false);
  // 关闭弹窗
  const handleRightShow = () => {
    setShowPopupFooter(false);
  };
  const handleShow = () => {
    setShowPopupFooter(true);
  };
  const { detail } = useAppSelector((state) => state.article);
  return (
    <div className={styles.root}>
      <div className="comment-footer">
        <div className="input-btn" onClick={handleShow}>
          <Icon type="iconbianji" />
          <span>去评论</span>
        </div>

        {type === 'normal' && (
          <>
            <div className="action-item">
              <Icon type="iconbtn_comment" />
              <p>评论</p>
              {/* !!,0不会进行隐式转换 */}
              {!!detail.comm_count && (
                <span className="bage">{detail.comm_count}</span>
              )}
            </div>
            {/* 'iconbtn_like2' */}
            <div className="action-item">
              <Icon
                type={
                  detail.attitude === 1 ? 'iconbtn_like_sel' : 'iconbtn_like2'
                }
              />
              <p>点赞</p>
            </div>
          </>
        )}
        <div className="action-item">
          {/* 'iconbtn_collect' */}
          <Icon
            type={
              detail.is_collected ? 'iconbtn_collect_sel' : 'iconbtn_collect'
            }
          />
          <p>收藏</p>
        </div>
        <div className="action-item">
          <Icon type="iconbtn_share" />
          <p>分享</p>
        </div>
      </div>
      <Popup visible={showPopupFooter} destroyOnClose>
        <CommentInput onBack={handleRightShow}></CommentInput>
      </Popup>
    </div>
  );
}
